<template>
  <div id="GunDetailView">
    <div style="margin: 30px auto; width: 1200px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          v-if="gun.type"
          :to="{ path: '/' + gun.type.toUpperCase() }"
          >{{ typeName[gun.type] }}</el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ gun.gunName || gun.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <main>
      <div class="left">
        <el-image
          :src="url + (gun.photo || gun.path)"
          :preview-src-list="[url + (gun.photo || gun.path)]"
          style="
            width: 700px;
            height: 700px;
            border: 1px solid rgba(240, 214, 214, 0.812);
          "
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
      <div class="right">
        <h1>{{ gun.gunName || gun.name }}</h1>
        <h3>{{ gun.price }}￥</h3>

        <div class="test">
          <h4 style="margin-bottom: 8px">选择收货地点</h4>
          <div class="area">
            <area-cascader
              :level="1"
              type="text"
              placeholder="请选择地区"
              @change="gg"
              v-model="selected"
              :data="pcaa"
            ></area-cascader>
            <div style="margin-top: 8px; height: 25px">
              <h6 style="color: brown" v-if="flag1">有货</h6>
            </div>
          </div>
        </div>
        <div class="sel">
          <div>
            <h4>选择数量</h4>
            <el-input-number
              v-model="num"
              :min="1"
              size="small"
            ></el-input-number>
          </div>
          <!-- 登陆后 -->
          <el-button type="danger" v-if="$store.state.user" @click="togec()"
            >加入购物车</el-button
          >
          <!-- 登陆前 -->
          <el-button
            type="danger"
            v-if="!$store.state.user"
            @click="$router.push('/login')"
            >加入购物车</el-button
          >
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import "vue-area-linkage/dist/index.css";
import { AreaSelect } from "vue-area-linkage";
import { pcaa } from "area-data";
import { getData } from "../util/getData";
export default {
  name: "GunDetailView",
  component: {
    AreaSelect,
  },

  data() {
    return {
      flag1: false,
      pcaa: pcaa,
      placeholders: [" ", " ", " "],
      selected: [],
      num: 1,
      url: "/api/",
      id: "0",
      gun: "",
      type: "",
      typeName: {
        ALL: "全部",
        AR: "突击步枪",
        CB: "卡宾枪",
        HG: "手枪",
        SMG: "冲锋枪",
        SG: "霰弹枪",
        DMR: "精确射手步枪",
        SR: "栓动步枪",
        MJ: "瞄具",
        PJ: "战术设备&配件",
        MGZ: "弹匣",
        FJ: "防具",
        OTHER: "其他",
      },
    };
  },
<<<<<<< HEAD
  async mounted() {
=======
  // async created() {
  //   this.id = this.$route.params.id || 0;
  //   console.log(this.gun);
  //   this.$watch(
  //     () => this.$route.params,
  //     (toParams, previousParams) => {
  //       this.type = toParams.type;
  //       if (this.type) {
  //         this.type = this.type.toUpperCase();
  //         switch (this.type) {
  //           case "ALL":
  //             this.GunList = res.data;
  //             break;
  //           case "OTHER":
  //             let setMap = new Set([
  //               "AR",
  //               "CB",
  //               "DMR",
  //               "HG",
  //               "SG",
  //               "SMG",
  //               "SR",
  //             ]);
  //             this.GunList = res.data.filter((item) => {
  //               return !setMap.has(item.type);
  //             });
  //             break;
  //           default:
  //             this.GunList = res.data.filter((item) => {
  //               return item.type == this.type;
  //             });
  //             break;
  //         }
  //       }
  //     }
  //   );
  //   let res = await getData({ url: "/gunlist/findall" });

  //   res.data.forEach((element) => {
  //     if (element.id == this.id) {
  //       this.gun = element;
  //     }
  //   });
  // },
 async mounted(){
>>>>>>> aeac76ee09f2160bf6de8f0874cd0de4e5cafcca
    this.id = this.$route.params.id || 0;
    console.log(this.gun);
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        this.type = toParams.type;
        if (this.type) {
          this.type = this.type.toUpperCase();
          switch (this.type) {
            case "ALL":
              this.GunList = res.data;
              break;
            case "OTHER":
              let setMap = new Set([
                "AR",
                "CB",
                "DMR",
                "HG",
                "SG",
                "SMG",
                "SR",
              ]);
              this.GunList = res.data.filter((item) => {
                return !setMap.has(item.type);
              });
              break;
            default:
              this.GunList = res.data.filter((item) => {
                return item.type == this.type;
              });
              break;
          }
        }
      }
    );
    let res = await getData({ url: "/gunlist/findall" });

    res.data.forEach((element) => {
      if (element.id == this.id) {
        this.gun = element;
      }
    });
  },
  methods: {
    gg() {
      console.log(this.selected);
      this.flag1 = true;
    },
    togec() {
      console.log(this.$store.state.user.id);
      console.log(this.gun.id);
      console.log(this.gun.photo);
      console.log(this.gun.price);
      console.log(this.gun.gunName);
      axios
        .request({
          url: "/api" + "/gunlist/setgwc",
          method: "post",
          data: {
            userid: this.$store.state.user.id,
            itemid: this.gun.id,
            photo: this.gun.photo,
            price: this.gun.price,
            gunname: this.gun.gunName,
          },
        })
        .then((res) => {
          if (res.status == 200) {
            this.$message.success("加入成功");
          } else {
            this.$message.error("加入失败");
          }
        });
    },
  },
};
</script>

<style scoped >
#GunDetailView {
  width: 1200px;
  margin: 0 auto;
}

main {
  display: flex;
  height: 75vh;
}
.left {
  width: 700px;
}
.right {
  padding: 0 0 0 15px;
  width: 100%;
  height: 700px;
}

h1 {
  letter-spacing: 8px;
  line-height: 1.2;
  margin: 0 0 13px 0;
  font-weight: bolder;
  color: #059;
}
h3 {
  margin-top: 25px;
}

.test {
  margin-top: 30px;
}
.area-select.large {
  width: 350px;
}

.el-button--danger {
  width: 150px;
  color: #fff;
  background-color: #b20000;
  border-color: #b20000;
  transition: 0.2s;
}

.el-button--danger:hover {
  transition: 0.2s;
}

.sel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 150px;
}
</style>